<template>
	<transition name="slide">
		<div class="food-detail" v-show="showFlag" ref="food">
			<div>
				<div class="image-header">
					<img :src="food.image"></img>
					<div class="back" @click="showFlag=false">
						<i class="icon-arrow_left"></i>
					</div>
				</div>
				<div class="content">
					<h4 class="title">{{food.name}}</h4>
					<div class="detail">
						<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
					</div>
					<div class="price">
						<span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrapper">
						<cartcontrol :food="food" @cartAdd="cartAdd"></cartcontrol>
					</div>
					<transition name="fade">
						<div class="buy" v-show="!food.count || food.count === 0" @click="addFirst">加入购物车</div>
					</transition>
				</div>
				<split v-show="food.info"></split>
				<div class="info" v-show="food.info">
					<div class="title">商品信息</div>
					<div class="text">{{food.info}}</div>
				</div>
				<split v-show="food.info"></split>
				<div class="food-ratings">
					<h1 class="title">商品评价</h1>
					<ratingselect :desc="desc" :ratings="food.ratings"
					 @toSelect="toSelect" @contentToggle="contentToggle"></ratingselect>
					<div class="ratings-wrapper">
						<ul v-show="food.ratings && food.ratings.length>0">
							<li v-show="needShow(rating.rateType,rating.text)" v-for="rating in food.ratings" class="rating-item border-1px">
								<div class="user">
									<span class="name">{{rating.username}}</span>
									<img class="avatar" width="12" height="12" :src="rating.avatar"></img>
								</div>
								<div class="time">{{rating.rateTime | formatDate}}</div>
								<p class="text">
									<span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}">{{rating.text}}</span>
								</p>
							</li>
						</ul>
						<div class="no-rating" v-show="!food.ratings || food.ratings.length<1">暂无评价</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import BScroll from 'better-scroll';
	import cartcontrol from '../cartcontrol/cartcontrol';
	import split from '../split/split';
	import ratingselect from '../ratingselect/ratingselect';
	import {formatDate} from '../../common/js/date';

	const ALL = 2;

	export default {
		props: {
			food: {
				type:Object
			}
		},
		data() {
			return {
				showFlag:false,
				selectType:ALL,
				onlyContent:false,
				desc: {
					all:'全部',
					positive:'推荐',
					negative:'吐槽'
				}
			}
		},
		filters: {
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date,'yyyy-MM-dd hh:mm')
			}
		},
		components:{
			cartcontrol,
			split,
			ratingselect
		},
		methods: {
			show() {
				this.showFlag = true;
				this.$nextTick(() => {
					if(!this.scroll) {
						this.scroll = new BScroll(this.$refs.food,{
							click:true
						})
					} else {
						this.scroll.refresh();
					}
				})
			},
  	  cartAdd(target) {
  			this.$emit("cartAdd",target);
  		},
			addFirst(event) {
				if(!event._constructed) {
					return;
				};
				this.$emit("cartAdd",event.target);
				this.$set(this.food,'count',1);
			},
			toSelect(type) {
				this.selectType = type;
			},
			contentToggle(onlyContent) {
				this.onlyContent = onlyContent;
			},
			needShow(type,text) {
				if(this.onlyContent && !text) {
					return false;
				};
				if(this.selectType === ALL) {
					return true;
				} else {
					return type === this.selectType
				}
			}
		}
	}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
	@import "../../common/stylus/mixin";
	.food-detail
		position:fixed
		left:0
		top:0
		bottom:48px
		z-index:5
		width:100%
		background:#fff
		&.slide-enter-active,&.slide-leave-active
			transition:all 0.5s
		&.slide-enter,&.slide-leave-to
			transform:translate3d(100%,0,0)
		.image-header
			position:relative
			width:100%
			height:0
			padding-top:100%
			img
				position:absolute
				top:0
				left:0
				width:100%
				height:100%
			.back
				position:absolute
				top:10px
				left:0
				.icon-arrow_left
					display:block
					padding:10px
					font-size:20px
					color:rgb(0,160,220)
		.content
			position:relative
			padding:18px
			.title
				line-height:14px
				margin-bottom:8px
				font-size:14px
				font-weight:700
				color:rgb(7,17,27)
			.detail
				margin-bottom:18px
				height:10px
				line-height:10px
				font-size:10px
				color:rgb(147,153,159)
				.count
					margin-right:12px
			.price
				font-weight:700
				line-height:24px
				.now
					margin-right:8px
					font-size:14px
					color:rgb(240,20,20)
				.old
					text-decoration:line-through
					font-size:10px
					color:rgb(147,153,159)
			.cartcontrol-wrapper
				position:absolute
				right:12px
				bottom:12px
			.buy
				position:absolute
				right:18px
				bottom:18px
				z-index:10
				height:24px
				line-height:24px
				padding:0 12px
				box-sizing:border-box
				border-radius:12px
				font-size:10px
				color:#fff
				background:rgb(0,160,220)
				&.fade-enter-active,&.fade-leave-active
					transition:all 0.2s
				&.fade-enter,&fade-leave-to
					opacity:0
		.info
			padding:18px
			.title
				line-height:14px
				margin-bottom:6px
				font-size:14px
				color:rgb(7,17,27)
			.text
				line-height:24px
				padding:0 8px
				font-size:12px
				color:rgb(77,85,93)
		.food-ratings
			padding-top:18px
			.title
				line-height:14px
				margin-left:18px
				font-size:14px
				color:rgb(7,17,27)
			.ratings-wrapper
				padding:0 18px
				.rating-item
					position:relative
					padding:16px 0
					border-1px(rgba(7,17,27,0.1))
					.user
						position:absolute
						right:0
						top:16px
						line-height:12px
						font-size:0
						.name
							display:inline-block
							margin-right:6px
							vertical-align:top
							font-size:10px
							color:rgb(147,153,159)
					.time
						margin-bottom:6px
						line-height:12px
						font-size:12px
						color:rgb(147,153,159)
					.text
						line-height:16px
						font-size:12px
						color:rgb(7,17,27)
						.icon-thumb_up,.icon-thumb_down
							margin-right:4px
							font-size:12px
						.icon-thumb_up
							color:rgb(0,160,220)
						.icon-thumb_down
							color:rgb(147,153,159)
				.no-rating
					padding:16px 0
					font-size:12px
					color:rgb(147,153,159)
</style>